require.config({
    baseUrl: '../js/lib',
    paths: {
        jquery: 'jquery',
        axios: 'axios',
        cookie: 'cookie'
    },
    shim: {
    }
});
require(['jquery'], function ($) {
    $(function () {
        const url = ['./template/sub-nav1.html', './template/sub-nav2.html', './template/sub-nav3.html', './template/sub-nav4.html', './template/sub-nav5.html', './template/sub-nav6.html', './template/sub-nav7.html', './template/sub-nav8.html'];
        $('.template>li').on('mouseover', function () {
            let index = $('.template>li').index(this);
            console.log(1);
            if (index == 8 || index == 9) return;
            $('.box').load(url[index], function () {
                console.log(1);
            });
            $('.box').animate({
                height: '250px'
            }, 200);
        });
        $('.template').on('mouseleave', function () {
            $('.box').animate({
                height: '0px'
            }, 200);
        })
        $('.delete').on('mouseover', function () {
            $('.box').animate({
                height: '0px'
            }, 200);
        })
    })
})
require(['jquery', 'axios', 'cookie'], function ($, axios, cookie) {
    let id = location.search.split('=')[1];
    axios.get('../product/getItem', { params: { product_id: id } }).then(res => {
        let data = res.data[0];
        let picture = JSON.parse(data.picture);
        let pircelist = [];
        JSON.parse(data.type).map((function (el, i) {
            pircelist.push(el.pirce);
        }));
        console.log(pircelist);
        let pirce = pircelist[0];
        $('.img').html(`<img src="../${picture[0].src}" alt="">`)
        $('.show-main .top h3').html(data.title);
        $('.show-main .top span').html(data.details);
        $('.show-main .top b').html(pirce);
        let types = JSON.parse(data.type);
        let template_type = '<p>选择版本</p>';
        let template_color = '<p>选择颜色</p>'
        types.forEach(function (el, i) {
            template_type += `<div>${el.type}</div>`;
        })
        types[0].color.forEach((function (el, i) {
            template_color += `<div>${el}</div>`;
        }))
        $('.type').html(template_type);
        $('.color').html(template_color);
        $('.type').find('div').eq(0).addClass('active');
        $('.color').find('div').eq(0).addClass('active');
        $('.price .p-top p').html(data.title);
        $('.price .p-top span').html(pirce);
        $('.price>span').html(`总计：${pirce}`);
        $('.click').on('click', function () {
            addItem(data.id, 1, $('.type .active').html(), $('.price .p-top span').html(), $('.color .active').html());
        })
        $('.type>div').on('click', function () {
            $(this).addClass('active').siblings().removeClass('active');
            let type = $(this).html();
            let index = 0;
            types.forEach((function (el, i) {
                if (el.type === type) index = i;
            }))
            $('.price .p-top span').html(pircelist[index]);
            $('.price>span').html(`总计：${pircelist[index]}`);
            $('.show-main .top b').html(pircelist[index]);
        });

        $('.color>div').on('click', function () {
            $(this).addClass('active').siblings().removeClass('active');
        })
    }).catch(err => {
        console.log(err);
    });
    function addItem(id, num, type, price, color) {
        let shop = cookie.get('shop');
        let product = {
            id,
            num,
            type,
            price,
            color
        };
        if (shop) {
            shop = JSON.parse(shop);
            if (shop.some(el => el.id === id && el.type === type && el.color === color)) {
                let _index = shop.findIndex(elm => elm.id == id && elm.type === type&& elm.color === color);
                console.log(1);
                let count = parseInt(shop[_index].num);
                count += parseInt(num);
                shop[_index].num = count;
            } else {
                console.log(2);
                shop.push(product);
            }
        } else {
            shop = [];
            shop.push(product);
        }
        cookie.set('shop', JSON.stringify(shop), 3);
    }
})